<script setup >
import CircleProgress from 'circle-progress';
defineOptions({
  name: 'myprogress'
})

onMounted(() => {
  const MAX = 37

  const cp = new CircleProgress('.progress', {
    max: MAX,
    value: 12,
    animationDuration: 400,
    textFormat: (val) => val + '°',
  });

  document.querySelector('#value-input').addEventListener('change', e => {
    const val = e.target.value;
    cp.value = val;
    cp.el.style.setProperty('--progress-value', val / MAX);
  })
})

</script>

<template>
  <div>
    <div class="progress"></div>
    <input id="value-input" type="range" max="37" value="12">
    <p><a href="https://github.com/tigrr/circle-progress" target="_blank" rel="noopener">Circle Progress on GitHub</a></p>
  </div>
</template>
<style  scoped>
body {
  margin: 20px 10px;
  background: #1d1e22;
  text-align: center;
  font-family: Montserrat, Helvetica Neueu, Helvetica, Arial, sans-serif;
}

.progress {
  --progress-value: .3243;
  --color: hsl(calc(240 * (1 - var(--progress-value))), 100%, calc(30% + 20% * var(--progress-value)));
}

.circle-progress {
  width: 250px;
  height: 250px;
}


.circle-progress-value {
  stroke-width: 6px;
  stroke: var(--color);
  stroke-dasharray: 5.98 2;
  transition: stroke .4s;
}

.circle-progress-circle {
  stroke-width: 2px;
  stroke: hsl(228, 8%, 10%);
}

.circle-progress-text {
  font-weight: bold;
  fill: var(--color);
  transform: translateX(.2em);
  transition: fill .4s;
}



input[type=range] {
  width: 210px;
  margin-top: 30px;
  margin-bottom: 20px;
  -webkit-appearance: none;
  display: inline-block;
  background: none;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  @mixin track {
    width: 100%;
    height: 6px;
    background: hsl(228, 8%, 10%);
    outline: none;
  }

  @mixin thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    background: hsl(228, 8%, 30%);
    transition: .15s;
    border: none;
    border-radius: 0;
  }

  @mixin thumb-active {
    background: hsl(228, 8%, 50%);
  }

  &::-webkit-slider-runnable-track {
    @include track;
  }

  &::-moz-range-track {
    @include track;
  }

  &::-ms-track {
    @include track;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    @include thumb;
  }

  &::-moz-range-thumb {
    @include thumb;
  }

  &::-ms-thumb {
    @include thumb;
  }

  &:hover::-webkit-slider-thumb,
  &:focus::-webkit-slider-thumb {
    @include thumb-active;
  }

  &:hover::-moz-range-thumb,
  &:focus::-moz-range-thumb {
    @include thumb-active;
  }

  &:hover::-ms-thumb,
  &:focus::-ms-thumb {
    @include thumb-active;
  }
}





a {
  color: hsl(228, 8%, 50%);
  text-decoration-offset: 4px;
}
</style>
